<script setup lang="ts">
import {list} from '@/api/contact-us.ts'
import {onMounted, ref} from "vue";
import {useCounterStore} from "@/stores/counter.ts";
import AMapLoader from "@amap/amap-jsapi-loader";
import position from '@/assets/icons/position.png'

const counter = useCounterStore()
const baseUrl=import.meta.env.VITE_API_URL;
onMounted(() => {
  getContactUs()
  counter.scrollToTop()
})
const contactus=ref()
const getContactUs=()=>{
  list({}).then((res)=>{
    contactus.value = res.data[0]
    initMap()
  })
}
const map=ref(null)
const initMap=()=>{
  AMapLoader.load({
    key:'74da83198ce38c7b9a6a0489eedcfd89',
    version:'2.0',
    plugins:[]
  }).then((AMap)=>{
    map.value=new AMap.Map('container',{
      viewMode: "3D",
      zoom: 10,
      center: [117.115349,30.531828], // 地图初始中心点
    })
    const marker = new AMap.Marker({
      icon: position,
      position: [117.115349,30.531828],
      offset: new AMap.Pixel(-13, -30)
    });
    marker.setMap(map.value);
    marker.on('click', function() {
      // 跳转到第三方地图，例如使用 Google Maps 的 URL 格式
      var url = 'https://uri.amap.com/marker?position=117.115349,30.531828';
      window.open(url, '_blank'); // 在新标签页中打开
    });
  })
}
</script>

<template>
  <div>
    <el-carousel class="el-carousel__item" :autoplay="false" indicator-position="none" arrow="never">
      <el-carousel-item v-for="item in 1" :key="item">
        <h3 class="small">
          <img v-if="contactus && contactus.introductionImg" v-img-lazy=" baseUrl+contactus.introductionImg">
          <div class="shuffingtext">
            <span>{{contactus && contactus.textIntroduction ? contactus.textIntroduction:''}}</span>
            <span v-if="contactus && contactus.textIntroductionSmall" class="spansmall">
              {{contactus.textIntroductionSmall}}
            </span>
          </div>
        </h3>
      </el-carousel-item>
    </el-carousel>
    <div class="concat-us">
      <h1> {{contactus && contactus.city ? contactus.city:''}}</h1>
      <div id="container" class="map">
      </div>
      <div style="width: 50%;">
        <el-text class="info"><el-icon><LocationInformation /></el-icon>&nbsp;&nbsp;{{contactus && contactus.detailAddress ? contactus.detailAddress:''}}</el-text>
        <el-text class="info"><el-icon><PhoneFilled /></el-icon>&nbsp;&nbsp;{{contactus && contactus.phone ? contactus.phone:''}}</el-text>
        <el-text class="info"><el-icon size="18" ><svg-icon :icon-class="'email'"></svg-icon></el-icon>&nbsp;&nbsp;{{contactus && contactus.email ? contactus.email:''}}</el-text>
      </div>
    </div>
  </div>
</template>

<style scoped>
.spansmall{
  font-size: 20px;
  //margin-top: 10px;
  color: #82aa82;
  font-weight: 500;
}
.shuffingtext{
  display: flex;align-items: center;flex-direction: column
}
.concat-us{
  margin-top: 50px;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.info{
  margin-top: 15px;
  color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-carousel__item {
  height: 100vh;
}
.el-carousel__item h3 {
  color: #694747;
  font-size: 14px;
  opacity: 1;
  line-height: 300px;
  margin: 0;
  text-align: center;
}
.el-carousel__item h3 div{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  //font: italic bold 40px '新宋体';
  color: #a1a111;
  font-weight: bolder;
  //text-shadow: 2px 2px 4px #000000; /* 水平偏移2px，垂直偏移2px，模糊半径4px，颜色为黑色 */
}
.small  {
  width: 100%;
  height: 100%;
}
.small img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.map{
  width: 35%;height: 300px;border-radius: 5px;margin: 5px
}
@media (max-width: 540px) {
  .el-carousel__item h3 div{
    font-size: 16px;
  }
  .spansmall{
    font-size: 14px;
  }
  .map{
    width: 98%;
  }
}
</style>